import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/home.vue'
Vue.use(VueRouter)

// vue 基础用法 -------- 之 --------
//component 子组件切换
import Component from '../pages/component/index.vue'

//keepAlive
import keepAlive from '../pages/keepAlive/index.vue'
import keepIndex from '../pages/keepAlive/routerList/keepIndex.vue'
import keepDetails from '../pages/keepAlive/routerList/keepDetails.vue'

//message 组件传参通讯方式
import Message from '../pages/message/index.vue'
import attrs from '../pages/message/attrs/index.vue'
import eventBus from '../pages/message/eventBus/index.vue'
// import parentAndChild from '../pages/message/parent/index.vue'

//ES6 基础用法 -------- 之 -------- 
// async 同步异步  
import async from '../pages/asycn/index.vue'
import debounce from '../pages/debounce/index.vue'
import lazyLoad from '../pages/lazyLoad/index.vue'
import lazyImg from '../pages/lazyLoad/children/lazyImg'

//vue 无UI 封装组件 -------- 之 -------- 
// dialog  弹窗封装
import dialog from '../pages/dialog/index.vue'

//InfiniteScroll 无限滚动 
import infiniteScroll from '../pages/infiniteScroll/index.vue'


//canvas 
import canvas from '../pages/canvas/index.vue'
import Static from '../pages/canvas/static/index.vue'
import canvasAnimat from '../pages/canvas/animat/index.vue'

//二维码 
import QRcode from '../pages/qrCode/index.vue'

//jsExportExcel 下载excel 
import jsExportExcel from '../pages/jsExportExcel/index.vue'

//e-charts 相关组件 
import eChartsRouter from "../pages/echarts/router.vue"
import eChartsIndex from "../pages/echarts/index.vue"
import eChartsLine from "../pages/echarts/line/index.vue"

//element-ui 组件  
import elementTabelRouter from '../pages/element-ui/tabel/router.vue'
import elementTabelIndex from '../pages/element-ui/tabel/index.vue'
import elementTableStyle from '../pages/element-ui/tabel/tabelStyle/index.vue'
import elementTableRowKey from "../pages/element-ui/tabel/tableRowKey/index.vue"

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: {
      title: "首 页",
      isBack: false,
    }
  },


  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

//vue 组件 
let vueRouer = [
  {
    path: '/component',
    name: 'component',
    component: Component,
    meta: {
      title: "Component"
    }
  },
  {
    path: '/keepAlive/',
    name: 'keepAlive',
    component: keepAlive,
    redirect: '/keepAlive/keepList',
    children: [{
      path: "keepList",
      name: "keepIndex",
      component: keepIndex,
      meta: {
        title: "keepAlive",
        keepAlive: false,
        toBack: true,
      }
    }, {
      path: "keepDetails",
      name: "keepDetails",
      component: keepDetails,
      meta: {
        title: "keepDetails",
      }
    }]
  }, {
    path: '/message/index',
    name: 'message',
    component: Message,
    meta: {
      title: '通信方式'
    }
  }, {
    path: '/message/attrs',
    name: 'attrs',
    component: attrs,
    meta: {
      title: 'attrs'
    }
  }, {
    path: '/message/eventBus',
    name: 'eventBus',
    component: eventBus,
    meta: {
      title: 'eventBus'
    }
  }, {
    path: '/message/parent',
    name: 'parent-child',
    // component: parentAndChild,
    component: () => import(/* webpackChunkName: "parent" */ '../pages/message/parent/index.vue'),
    meta: {
      title: '$parent And $child'
    }
  }, {
    path: '/directives',
    name: 'directives',
    component: () => import('../pages/directives/index.vue'),
    meta: {
      title: "自定义指令"
    }
  },

]


let Es6Router = [
  {
    path: '/async',
    name: 'async',
    component: async,
    meta: {
      title: "同步 - 异步"
    }
  },
  {
    path: '/debounce',
    name: 'debounce',
    component: debounce,
    meta: {
      title: "节流 - 防抖"
    }
  },
  {
    path: '/lazyLoad',
    name: 'lazyLoad',
    component: lazyLoad,
    meta: {
      title: "上拉加载 + 图片懒加载"
    }
  },
  {
    path: '/lazyLoad/lazyImg',
    name: 'lazyImg',
    component: lazyImg,
    meta: {
      title: "图片懒加载"
    }
  }
]

let pageRouer = [
  {
    path: '/dialog',
    name: 'dialog',
    component: dialog,
    meta: {
      title: "弹窗封装"
    }
  }, {
    path: '/infiniteScroll/:type',
    name: 'infiniteScroll',
    component: infiniteScroll,
    meta: {
      title: "无限滚动"
    }
  }, {
    path: '/QRcode',
    name: 'qrcode',
    component: QRcode,
    meta: {
      title: "二维码"
    }
  }, {
    path: '/jsExportExcel',
    name: 'jsExportExcel',
    component: jsExportExcel,
    meta: {
      title: "js-export-excel"
    }
  }, {
    path: '/canvas/index',
    name: 'canvas',
    component: canvas,
    meta: {
      title: "canvas"
    }
  }, {
    path: '/canvas/static',
    name: 'static',
    component: Static,
    meta: {
      title: "Canvas - static"
    }
  }, {
    path: '/canvas/animat',
    name: 'canvasAnimat',
    component: canvasAnimat,
    meta: {
      title: "Canvas - animat"
    }
  }, {
    path: '/e-charts',
    name: 'e-charts',
    component: eChartsRouter,
    redirect: '/e-charts/index',
    children: [{
      path: "index",
      name: "charts",
      component: eChartsIndex,
      meta: {
        title: "e-charts 首页",
        toBack: true,
      }
    }, {
      path: "line",
      name: "chartsLine",
      component: eChartsLine,
      meta: {
        title: "e-charts 折线图",
        toBack: true,
      }
    }]
  },
]

let elementUI = [{
  path: '/element/tabel/',
  name: 'element-tabel',
  component: elementTabelRouter,
  redirect: '/element/tabel/index',
  children: [{
    path: "index",
    name: "tabel",
    component: elementTabelIndex,
    meta: {
      title: "Element-Tabel 首页",
      toBack: true,
    }
  }, {
    path: "style",
    name: "tableStyle",
    component: elementTableStyle,
    meta: {
      title: "table样式 Style",
      toBack: true,
    }
  }, {
    path: "row-key",
    name: "tableRowKey",
    component: elementTableRowKey,
    meta: {
      title: "table 跨页面多选",
      toBack: true,
    }
  }]
},]



const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routes.concat(vueRouer, Es6Router, pageRouer, elementUI)
})

export default router
